<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>banner-导航区块</title>
    <link rel="stylesheet" type="text/css" href="../css/reset_nec.css"/>
    <style>
        /* banner css set*/
        div,ul,li{outline:1px dotted;

        }
        div.banner{
         font:14px "microsoft Yahei";
        margin:100px auto 0;
        width:1100px;
        height:600px;
        }
        ul.nav1{
            width:240px;height:100%;
            background:rgba(0,0,0,0.4);
            position:relative;
        }
    ul.nav1 li{

        height:42px;
    }
    ul.nav1 li:hover{
        background: #ff0;
    }
    ul.nav1 li:hover .a1{
        display: block;
    }
    ul.nav1 li a{
        position:relative;
        height: 100%;
        line-height: 42px;
        /*padding-left: 30px;*/
        display: block;
        padding-left: 30px;
    }
    ul.nav1 span{
        /*display: inline-block;*/
        /*width:10px;height:10px;line-height: 42px;*/
/*        padding:0 10px;*/
        position:absolute;
        right:24px;
    }
    ul.nav1 .a1{
        width:860px;height:600px;
        background:rgba(0,255,255,0.5);
        position:absolute;
        top:0;left:240px;
        display:none;
    }
        /*banner css set ends*/
        .model_box{
            background:rgba(0,0,0,0.5);
            position:fixed;top:0;bottom:0;right:0;left:0;z-index: 9;
        }
        .model_box>div{
            position:relative;
            background:#000;
            width:400px;height:400px;
            /*position:fixed;*/
            margin:200px auto 0;
            color:#fff;
        }
        .model_box .header{
            position: relative;
            height:40px;line-height:40px;
        }
        .model_box .header span{
            position: absolute;
            top:0;
            right:10px;
        }
        .model_box .main{
            height:320px;
        }
        .model_box .footer{height:40px;
            position:absolute;
            width:100%;
            bottom:0;
        }
    </style>
</head>
<body>
    <div class="model_box">
        <div>
            <div class="header">
                <p>This is a paragraph!</p>
                <span>关闭</span>
            </div>
            <div class="main">
                <p>This is another paragraph!</p>
                <p>This is another paragraph!</p>
                <p>This is another paragraph!</p>
                <p>This is another paragraph!</p>
            </div>
            <div class="footer">

            </div>
        </div>
    </div>
    <div class="banner">
        <ul class="nav1">
            <li>
                <a href="#">手机&nbsp;电话卡
                    <span>&gt;</span>
                </a>
                <div class="a1"></div>
            </li>
            <li>
                <a href="#">笔记本&nbsp;平板
                    <span>&gt;</span>
                </a>
                <div class="a1"></div>
            </li>
            <li>
                <a href="#">电视&nbsp;盒子
                    <span>&gt;</span>
                </a>
                <div class="a1"></div>
            </li>
            <li>
                <a href="#">路由器&nbsp;只能硬件
                     <span>&gt;</span>
                </a>
                <div class="a1"></div>
            </li>
            <li>
                <a href="#">移动电源&nbsp;电池&nbsp;插线板
                    <span>&gt;</span>
                </a>
                <div class="a1"></div>
            </li>
            <li>
                <a href="#">移动电源&nbsp;电池&nbsp;插线板
                    <span>&gt;</span>
                </a>
                <div class="a1"></div>
            </li>
            <li>
                <a href="#">移动电源&nbsp;电池&nbsp;插线板
                    <span>&gt;</span>
                </a>
                <div class="a1"></div>
            </li>
            <li>
                <a href="#">移动电源&nbsp;电池&nbsp;插线板
                    <span>&gt;</span>
                </a>
                <div class="a1"></div>
            </li>
        </ul>
       <ul>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
       </ul>
    </div>
    <div style="width:100%;height:1000px;"></div>
</body>
</html>